<template>
    <div class="login-container">
        <el-form 
        :model="ruleForm"
         status-icon
         label-position="left" 
         label-width="60px" 
         class="demo-ruleForm login-page">
            <div class="title">聚惠星商场后台管理 登录</div>
            <el-form-item label="用户名">
                <el-input type="text" 
                    clearable
                    onkeypress="javascript:if(event.keyCode == 32)event.returnValue = false"
                    v-model="ruleForm.username" 
                    auto-complete="off" 
                    placeholder="用户名">
                    </el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password" 
                        onkeypress="javascript:if(event.keyCode == 32)event.returnValue = false"
                        v-model="ruleForm.password" 
                        show-password
                        auto-complete="off" 
                        placeholder="密码">
                    </el-input>
                </el-form-item>
                <el-form-item label="验证码">
                    <el-input type="text" 
                        class="Inp1"
                        onkeypress="javascript:if(event.keyCode == 32)event.returnValue = false"
                        clearable
                        v-model="ruleForm.code" 
                        auto-complete="off" 
                        placeholder="验证码">
                    </el-input>
                    <div class="ImgBox right" @click="codeFn"><img :src="codePic" alt=""></div>
                    <div class="clear"></div>
                </el-form-item>
            <el-checkbox 
                v-model="checked"
                class="rememberme"
                @change="passFn"
            >记住密码</el-checkbox>
            <el-button 
            type="primary" style="width:100%;" 
            :loading="logining" @click="loginFn"
            v-loading.fullscreen.lock="fullscreenLoading"
            >登录</el-button>
        </el-form>
    </div>
</template>

<script>
import {login,codeImg} from '@/api/login';
import {SetCookie,DelCookie,GetCookie,setSession} from '@/config/config';
import routerMain from '@/router/index'
export default {
    data(){
        return {
            logining: false,
            ruleForm: {
                username: '',
                password: '',
                code:'',
            },
            checked: false,
            codePic:'',
            codeId:'',
            fullscreenLoading:false,
        }
    },
    mounted(){
        let _self = this;
        _self.codeFn();
        if(GetCookie('userPass')){
            let {username,password} = JSON.parse(GetCookie('userPass'));
            _self.ruleForm={
                username,
                password,
                code:'',
            }
        }
        document.onkeydown = function(e){
            e = window.event || e;
            if(_self.$route.path=='/' && (e.code=='enter' || e.code=='Enter')){
                _self.loginFn()
            }
           
        }
    },
    methods: {
       codeFn(){
           let _self = this;
           codeImg().then(res=>{
               if(res.errno==0){
                   _self.codePic = 'data:image/gif;base64,'+res.data.img;
                   _self.codeId = res.data.uuid;
               }
           })
       },
       loginFn(){
            let _self = this;
            let {username,password,code} = _self.ruleForm
            let data = {
                uuid:_self.codeId,
                code,
                username,
                password,
            }
            console.log(data);
            if(_self.ruleForm.username && _self.ruleForm.password && _self.ruleForm.code){
                login(data).then(res=>{
                    if(res.errno==0){
                        _self.fullscreenLoading = true;
                        setSession('token',res.data);
                        _self.$router.push('/home')
                    }else{
                        _self.fullscreenLoading = false;
                        _self.$message.error(res.errmsg);
                    }
                })
            }else{
                if(!_self.ruleForm.username){
                    _self.$message.error('请输入用户名');
                }else if(!_self.ruleForm.password){
                    _self.$message.error('请输入密码');
                }else{
                    _self.$message.error('验证码不能为空');
                }
            }
            
        },
        passFn(val){
            let _self =this;
            let {username,password} = _self.ruleForm
            let data = {username,password,}
            if(val){
                SetCookie('userPass',JSON.stringify(data))
            }else{
                DelCookie('userPass')
            }
        }
    }
};
</script>

<style>
.login-container{
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-image: url(https://seopic.699pic.com/photo/40012/4711.jpg_wh1200.jpg);
    background-size: cover;
}

.login-page {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 180px auto;
    width: 350px;
    padding: 25px 25px 15px;
    background: rgba(1,59,80,1);
    /* border: 1px solid #eaeaea; */
    box-shadow: 0 0 25px #cac6c6;
}
label.el-checkbox.rememberme {
    margin: 0px 0px 15px;
    text-align: left;
}
.title{
    color: #0372BD;
    font-size: 26px;
    margin-bottom: 10px;
}
.Inp1{
    width: 50%;
}
.ImgBox{
    height: 40px;
    width: 40%;
}
.ImgBox>img{
    width: 100%;
    height: 100%;
}
</style>